<template>
    <div>
        <van-swipe :autoplay="3000">
            <van-swipe-item><img src="../assets/logo.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/logo.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/logo.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/logo.png"></van-swipe-item>
        </van-swipe>

        <van-row gutter="20">
            <van-col span="8"> 
                <router-link to="/Search">
                <span class="mui-icon-home"></span>
                <div>制卡进度</div>
                </router-link>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-search"></span>
                <div>医保余额</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-phone"></span>
                <div>养老保险</div>
            </van-col>
        </van-row>
        <van-row gutter="20">
            <van-col span="8"> 
                <span class="mui-icon-home"></span>
                <div>制卡进度</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-search"></span>
                <div>医保余额</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-phone"></span>
                <div>养老保险</div>
            </van-col>
        </van-row>
        <van-row gutter="20">
            <van-col span="8"> 
                <span class="mui-icon-home"></span>
                <div>制卡进度</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-search"></span>
                <div>医保余额</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-phone"></span>
                <div>养老保险</div>
            </van-col>
        </van-row>
        <van-row gutter="20">
            <van-col span="8"> 
                <span class="mui-icon-home"></span>
                <div>制卡进度</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-search"></span>
                <div>医保余额</div>
            </van-col>
            <van-col span="8"> 
                <span class="mui-icon-phone"></span>
                <div>养老保险</div>
            </van-col>
        </van-row>



    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Row, Col } from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Row).use(Col);
export default{

}
</script>

<style>
.mui-icon-home,
.mui-icon-email,
.mui-icon-gear,
.mui-icon-info,
.mui-icon-search,
.mui-icon-phone{
    text-align: center;
	/*display: block;*/
    display:inline-block;
    vertical-align:middle;
	width: 60px;
	height: 50px;
	background-repeat: round;
	/*margin-left: 18px;*/
}

.mui-icon-home{
	background-image: url(../../static/imgs/feiji.png);
}
.mui-icon-search{
background-image: url(../../static/imgs/jiudian.png);
}
.mui-icon-phone{
background-image: url(../../static/imgs/menpiao.png);
}

.mui-icon-gear{
background-image: url(../../static/imgs/zhoubianyou.png);
}
.mui-icon-info{
background-image: url(../../static/imgs/dujia.png);
}
</style>